<template>
  <div class="masonry-gallery">
    <div class="masonry-col" v-for="(col, i) in columns" :key="i">
      <div class="masonry-item" v-for="img in col" :key="img.img || img">
        <img :src="img.img || img" :alt="img.title || ''" />
        <div v-if="img.title" class="caption">{{ img.title }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue'

const props = defineProps({
  items: { type: Array, required: true },
  cols: { type: Number, default: 3 },
})

const columns = ref([])

watchEffect(() => {
  // 简单分列算法
  const cols = Array.from({ length: props.cols }, () => [])
  props.items.forEach((img, i) => {
    cols[i % props.cols].push(img)
  })
  columns.value = cols
})
</script>

<style lang="scss" scoped>
.masonry-gallery {
  display: flex;
  gap: 18px;

  .masonry-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .masonry-item {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px #e0e7ff;

    img {
      width: 100%;
      display: block;
      border-radius: 12px 12px 0 0;
      object-fit: cover;
    }

    .caption {
      padding: 8px 12px;
      font-size: 1rem;
      color: #6366f1;
      text-align: center;
    }
  }
}
</style>